<template>
	<view style="position:fixed;width: 100%; height:100%;z-index: 99999;" :style="_top">
		<view style="position: absolute;z-index: -1;background: rgba(0, 0, 0, 0.5);width: 100%;height:100%;" @click="onPopupClick"></view>
		<view style='width:100%;height:auto;background:white;'>
			<view class="flex">
				<view class="tag" v-for='(item,index) in popupMenu' :key='index' @click='onPopupItemClick' :data-name='item.name'>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			popupMenu: {
				type: Array,
				default: () => []
			},
		},
		computed: {
			_top() {
				let top = uni.upx2px(100) + "px";
				//H5 position:fixed会把navbar遮挡了
				//#ifdef H5
				try {
					const res = uni.getSystemInfoSync();
					top = (uni.upx2px(100) + res.windowTop) + "px";
					console.log(top)
				} catch (e) {}
				//#endif
				return `'top': ` + top
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onPopupItemClick(event) {
				this.$emit("onPopupItemClick", event)
			},
			onPopupClick(event) {
				this.$emit("onPopupClick", event)
			}
		},
	}
</script>

<style scoped>
	.flex {
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20upx 20upx 20upx 20upx;
	}

	.tag {
		margin-right: 24upx;
		margin-top: 12upx;
		box-sizing: border-box;
		padding: 0upx 10upx 0upx 10upx;
		font-size: 30upx;
		border: rgba(54, 192, 161, 1) 1px solid;
		border-radius: 6upx;
		color: rgba(54,192,161,1);
		line-height:50upx;
		height: auto;
	}
</style>
